<template>
  <div class="page-content">
    <div class="h2">预约看机</div><div class="padding bg-white mb flex-row">
      <div class="flex1">
        <a-space>
          <a-form layout="inline" :model="searchState" @finish="toSearch">
            <a-form-item name="keyword">
              <a-input v-model:value="searchState.keyword" placeholder="名称" />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" html-type="submit">搜索</a-button>
                <a-button @click="reset" v-if="search">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
          <a-radio-group v-model:value="searchState.status" @change="()=>load()">
            <a-radio-button value="">全部</a-radio-button>         
            <a-radio-button :value="it.value" v-for="(it, index) in status" :key="index">{{ it.label }}</a-radio-button>
          </a-radio-group>
        </a-space>
      </div>
      
      <a-space>
        <a-button @click="refresh">刷新</a-button>
      </a-space>
    </div>
    <a-table :loading="loading" :columns="columns" :data-source="rows" :pagination="pagination" bordered>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          <span>{{ ((pagination.current - 1) * pagination.pageSize) + index + 1 }}</span>
        </template>
        <template v-if="column.key === 'status'">
          <a-tag v-if="record.status == -1">已作废</a-tag>
          <a-tag color="blue" v-else-if="record.status == 1">已处理</a-tag>
          <a-tag color="orange" v-else>未处理</a-tag>
        </template>
        <template v-if="column.key === 'item'">
           <ItemLink :item="record.item"/>
        </template>
       
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="handle(record)">处理</a>
            <a @click="handleRemove(record)" class="text-red">删除</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
  <AppointmentHandleModal :item="crtItem" v-if="modal == 'handle' && crtItem" @close="onCancel" @saved="onSaved"/>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { listOrderAppointment, removeOrderAppointment} from '@/api/order'
import { confirm } from '@/mixin'
import ItemLink from '@/components/ItemLink.vue';
import AppointmentHandleModal from './components/AppointmentHandleModal.vue';

const search = ref(false)
const status = [
  {label:'未处理',value:0},
  {label:'已处理',value:1},
  {label:'已作废',value:-1},
]
const loading = ref(false)
const modal = ref()
const crtItem = ref()
const rows = ref([])
const searchState = reactive({
  status: ''
})
const pagination = reactive({
  pageSize: 10,
  current: 1,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共${total}条`,
  onChange: (page, size) => {
    pagination.pageSize = size
    load(page)
  }
})

const columns = [
  {
    title: '序号',
    key: 'index',
    width: 70,
    align: 'center'
  },
  {
    title: '状态',
    key: 'status',
    width: 80,
  },
  {
    title: '预约人',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '预约人电话',
    dataIndex: 'phone',
    width: 120,
  },
  {
    title: '备注',
    dataIndex: 'remark',
  },  
  {
    title: '提交时间',
    dataIndex: 'createTime',
    width: 180,
  },
  {
    title: '机源',
    key: 'item',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 100
  },
]



onMounted(() => {
  load(1)
})

const reset = () => {
  searchState.keyword = null
  search.value = false
  load(1)
}
const toSearch = () => {
  search.value = true;
  load(1)
}

const load = async (page = 1) => {
  const params = {
    page,
    size: pagination.pageSize,
  }
  if (search.value) {
    for (const key in searchState) {
      const val = searchState[key]
      if (val) {
        params[key] = val;
      }
    }
  }
  if(searchState.status !== ''){
    params.status = searchState.status
  }

  loading.value = true;
  const res = await listOrderAppointment(params);
  loading.value = false;
  if (res.data) {
    const { total, records } = res.data;
    pagination.total = total
    pagination.current = page
    rows.value = records
  }
}

const refresh = () => {
  load(pagination.current)
}


// 删除
const handleRemove = item => {
  confirm(`您确定要删除这条预约信息吗？`, async () => {
    const res = await removeOrderAppointment(item.id)
    if (res.data) {
      message.success('删除成功')
      load(pagination.current)
    }
  })
}

const handle = (item)=>{
  crtItem.value = item
  modal.value = 'handle'
}

const onCancel = ()=>{
  modal.value = null 
}
const onSaved = ()=>{
  load(pagination.current)
  onCancel()
}

</script>

<style lang="less" scoped></style>